@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

strong{
    color: #242424;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-size: 10px;
}

.fc_gray{
    color: #808080;
}

/* contact 팝업*/
.contact_wrap{display: none; z-index: 999; border-top-left-radius: 1.5rem;border-bottom-left-radius: 1.5rem; position: fixed; top:3rem; right: 0; max-width: 80rem; width: 100%;  background-color: #fff; box-shadow: -10px 10px 10px rgba(82, 82, 82, 0.07); padding: 5rem 6rem 2rem 8rem;}
.contact_btn{ cursor: pointer; position: fixed; right: 0; top:50%; box-shadow: -10px 10px 30px rgb(0 0 0 / 8%); background-color: #ffffff; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; padding: 5.5rem 0; width: 5.2rem; height: 19rem; writing-mode: vertical-rl; font-size: 1.6rem;}

/*///// file_input //////*/

.file_input label {
    position:relative;
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    width:100px;
    background:#f5f5f5;
    color:#222222;
    text-align:center;
    line-height: 44px;
    height: 44px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: .5rem;
}

.file_input label input {
    position:absolute;
    width:0;
    height:100%;
    overflow:hidden;
}

.file_input .form-control-input[type=text] {
    vertical-align:middle;
    display:inline-block;
    width:83%;
    border:0;
    border:1px solid #e0e0e0;
    background-color: #fff !important;
} 


.form_search { /*commom.css*/
    margin-bottom: 0;
}
.form-group { /*custom.css*/
    position: relative;
}
.form_search input { /*commom.css*/
    width: 330px;
    border-color: #E3E3E3;
    border-radius: 0;
}  
.btn { /*custom.css*/
    padding: 15px 47px;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 600;
}
.btn-submit{
    width: 10rem;
    line-height: 0;
    background-color: #44b77b;
    border-color: #44b77b;
    color: #fff !important;
}
.btn-submit:hover{
    background-color: #2e8a5a;
    border-color: #2e8a5a;
    color: #fff;
}
.form_search .btn_search { /*commom.css*/   
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px 13px;
    height: 100%;
}
.header_head .button_wrap .btn.btn-link { /*commom.css*/
    padding: 8px 8px;
}
.btn_toggle { /*commom.css*/
    position: relative;
}
.btn-link { /*custom.css*/
    font-weight: 400;
    color: #05378D;
    text-decoration: none;
}
.badge { /*custom.css*/
    padding: 0.6rem 1rem;
    font-weight: 500;
}
.badge-primary { /*custom.css*/
    color: #fff;
    background: #2e8a5a;
}
.cart_badge { /*commom.css*/
    position: absolute!important;
    right: 4px;
    top: 10px !important;
    min-width: 20px;
    padding: 3px 5px;
    border-radius: 20px;
}

/* Form  textare */ /*custom.css*/
.form-control {
    height: 44px;
    padding: 17px 20px;
    /* border-color: #D2DCE8; */
    border-color: #e0e0e0;
    border-radius: 0;
    color: #222222;
    font-size: 16px;
  }
  select.form-control{
    background: url(../img/bg_select.png) no-repeat right 10px top 50%;
    background-size: 14px 8px;  
    cursor: pointer;
  }
  select option[value=""][disabled] {
      display: none;
  }
  textarea.form-control{
    padding:1rem 1.5rem;
  }
  textarea.form-control:focus{
      outline:0;
      border-color: #44b77b;    
      box-shadow: 0 0 0 0.2rem rgba(117, 243, 159, 0.2);
  }
  .form-group {
    position:relative;
  }
  .form-group label{
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }
  .form-group label.file_la{
    display: flex;
    justify-content: center;
  }
  .form-group label span{    
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #df3030;
}
  input[type="email"].form-control:focus,
  input[type="text"].form-control:focus,
  input[type="tel"].form-control:focus
  {
    outline:0;
    border-color: #44b77b;    
    box-shadow: 0 0 0 0.2rem rgba(117, 243, 159, 0.2);
}

/* form check */
.form-check input{
    display: none;
  }
  
  .form-check {
    padding-left: 0;
  }
  .form-check-1{
    padding-right: 2rem;
  }
  .form-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;    font-size: 18px;
    color: #808080 !important; font-weight: 500;
  }
  .chkbox{
    display: inline-block; width:20px; height:20px; margin:0 auto; margin-right: 10px; line-height: 20px; text-align: center;
    border:1px solid #D2DCE8; background-color: #fff; transition: all 0.2s ease-in;
  }
  .chkbox.radio{
    border-radius: 50%;
  }
  .chkbox-lg{
    width:20px; height:20px;
  }
  .chkbox i{
    width:100%; height:100%;
    color:#fff; font-size: 1.2rem;
  }
  .form-check .form-check-input:checked + .form-check-label .chkbox{
    border-color: #44b77b;   background-color: #dfffef;   
  }
  .form-check .form-check-input:checked + .form-check-label .chkbox i{
    color:#44b77b;  
  }
  .form-check-label {
    cursor: pointer;
    color: #222;
    font-weight: 500;
    display: flex;
    align-items: center;
}
  
  .form-control-sm {
    height: calc(1.7em + 0.9rem + 2px);
    padding: 0.25rem 1.3rem;
    font-size: 1.4rem;
    border-radius: 0;
  }
  select.form-control-sm{
    padding: 0.25rem 2.4rem 0.25rem 1.3rem;
  }
  .form-control-lg {
    height: calc(1.5em + 3.6rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.9rem;
    line-height: 1.5;
    border-radius: 0;
  }
.icn_close{
    cursor: pointer;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
    font-family:'Noto Sans KR', sans-serif;
    letter-spacing: -0.4px;
    color: #222;
    font-weight: 500;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button{outline: 0; border: none;}



.fc_primary{
    color: #44b77b;
}
/*폰트커스텀 기본사이즈 10px*/

.font_success {
    font-family: "GmarketSansBold";
    color: #333;
    transform: translate(0px, 5%);
}

.fs_8 {
    font-size: 0.8rem;
}

.fs_9 {
    font-size: 0.9rem;
}

.fs_10 {
    font-size: 1.0rem;
}

.fs_11 {
    font-size: 1.1rem;
}

.fs_12 {
    font-size: 1.2rem;
}

.fs_13 {
    font-size: 1.3rem;
}

.fs_14 {
    font-size: 1.4rem;
}

.fs_15 {
    font-size: 1.5rem;
}

.fs_16 {
    font-size: 1.6rem;
}

.fs_17 {
    font-size: 1.7rem;
}

.fs_18 {
    font-size: 1.8rem;
}

.fs_19 {
    font-size: 1.9rem;
}

.fs_20 {
    font-size: 2.0rem;
}

.fs_21 {
    font-size: 2.1rem;
}

.fs_22 {
    font-size: 2.2rem;
}

.fs_23 {
    font-size: 2.3rem;
}

.fs_24 {
    font-size: 2.4rem;
}

.fs_25 {
    font-size: 2.5rem;
}

.fs_26 {
    font-size: 2.6rem;
}

.fs_27 {
    font-size: 2.7rem;
}

.fs_28 {
    font-size: 2.8rem;
}

.fs_29 {
    font-size: 2.9rem;
}

.fs_30 {
    font-size: 3.0rem;
}

.fs_31 {
    font-size: 3.1rem;
}

.fs_32 {
    font-size: 3.2rem;
}

.fs_33 {
    font-size: 3.3rem;
}

.fs_34 {
    font-size: 3.4rem;
}

.fs_35 {
    font-size: 3.5rem;
}

.fs_36 {
    font-size: 3.6rem;
}

.fs_37 {
    font-size: 3.7rem;
}

.fs_38 {
    font-size: 3.8rem;
}

.fs_39 {
    font-size: 3.9rem;
}

.fs_40 {
    font-size: 4.0rem;
}

.fs_41 {
    font-size: 4.1rem;
}

.fs_42 {
    font-size: 4.2rem;
}

.fs_43 {
    font-size: 4.3rem;
}

.fs_44 {
    font-size: 4.4rem;
}

.fs_45 {
    font-size: 4.5rem;
}

.fs_46 {
    font-size: 4.6rem;
}

.fs_47 {
    font-size: 4.7rem;
}

.fs_48 {
    font-size: 4.8rem;
}

.fs_49 {
    font-size: 4.9rem;
}

.fs_50 {
    font-size: 5.0rem;
}

.fs_51 {
    font-size: 5.1rem;
}

.fs_52 {
    font-size: 5.2rem;
}
.fs_53 {
    font-size: 5.3rem;
}
.fs_54 {
    font-size: 5.4rem;
}
.fs_55 {
    font-size: 5.5rem;
}
.fs_56 {
    font-size: 5.6rem;
}
.fs_60 {
    font-size: 6rem;
}

.fw_100 {
    font-weight: 100 !important;
}

.fw_200 {
    font-weight: 200 !important;
}

.fw_300 {
    font-weight: 300 !important;
}

.fw_400 {
    font-weight: 400 !important;
}

.fw_500 {
    font-weight: 500 !important; 
}

.fw_600 {
    font-weight: 600 !important;
}

.fw_700 {
    font-weight: 700 !important;
}

.fw_800 {
    font-weight: 800;
}

.fw_900 {
    font-weight: 900;
}

.pt_16{
    padding-top: 1.6rem;
}
.pb_16{
    padding-bottom: 1.6rem;
}
.px_16{
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}
.mt_3{
    margin-top: 3rem;
}
.mt_5{
    margin-top: 5rem;
}
.mt_7{
    margin-top: 7rem;
}
.ml_18{
    margin-left: 1.8rem;
}

.inner{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 50;
}
.main_tit{font-family: 'yg-jalnan';line-height: 1.3;}
.main_tit2{font-size: 6rem;font-family: 'yg-jalnan';line-height: 1.3;}
.sub_tit{font-size: 26px;font-family: 'yg-jalnan';margin-bottom: 40px;}
.store_link{background-color: #fff;padding: 18px 22px;width: 240px;border-radius: 16px;display: flex;align-items: center; justify-content: center; text-align: center;}
.store_link small{font-size: 14px;display: block;}
.store_link strong{font-size: 20px;font-weight: 700;}
.btn_box{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.btn_text{margin-left: 20px;}
.btn_box .store_link:last-child {margin-left: 20px;}
.container{max-width: 1400px;margin: 0 auto;}
.img_w{display: block;}
.img_m{display: none !important;}
.img_w2{display:inline-block;}
.img_m2{display: none !important;}
#sec1{background: url("../img/sec01_bg.png")no-repeat center;color: #fff;background-size:cover; margin-top: 7rem;}
.sec1_logo p{ 
    display: flex;
    align-items: end;
    color:#FFCC00 !important; 
    font-size: 4rem !important;    
     margin-top: 0 !important;
     margin-right: 1rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 400;
}
#sec1 p{font-size: 18px;margin-top: 20px;margin-bottom: 60px;font-weight: 400;}
#sec1 p span{font-size: 18px}
#sec1 .container{display: flex;justify-content: space-between;padding:75px 0;align-items: center;}
#sec2{text-align: center;padding: 140px 0 115px;
    /* background: url("../img/sec2_bg.png")no-repeat bottom;background-size: contain; */
}
#sec2 .sec2_top{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.sec2_tit{padding-right: 36rem;}
.jalnan_p{font-family: 'yg-jalnan';font-size: 2.4rem;margin-bottom: 40px;color: #555555;}
.app_info{display: flex;justify-content: center;margin-top: 120px;flex-wrap: wrap;}
.app_info .jalnan_p{color: #222;margin-bottom: 22px;transform: translate(-12%, 0px);}
.app_info li{display: flex; flex-direction: column; align-items: center; }
.app_info li.mx-2{ margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.app_info img{margin-bottom: 30px;border-radius:12px;}
.app_info small{font-size: 20px;font-weight: 700;color:#00361C;transform: translate(-12%, 0px);}
#sec3 img, #sec4 img, #sec5 img, #sec6 img, #sec7 img, #sec8 img, #sec9 img{display: block; width: 100%;}
#sec10, #sec11{display: block;}
#sec10{color: #fff; height: 600px;background: url("../img/seec10_bg.jpg")no-repeat center;text-align: center;padding-top: 190px;background-size: cover;}
#sec10 .icon{margin-bottom: 60px;}
#sec10 .jalnan_p{color: #fff;margin-top: 60px;line-height: 1.8;word-break: keep-all;}


@media screen and (max-width:1840px){
    #sec2 .sec2_top {
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    .sec2_tit {
        padding-right: 0;
        margin-top: 3rem;
    }
    .contact_wrap{
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 3rem ;
    }
}
@media screen and (max-width:1560px){
    
#sec1 .container{padding: 100px 60px};

#sec2 .sec2_top{
    justify-content: center !important;
}
#sec2 .sec2_top img{
    width: 80%;
    text-align: center;
 }
 .sec2_tit{
     text-align: center;
     padding-right: 0 !important;
     margin-top: 3rem;
 }
 .main_tit, .main_tit2, .main_tit span, .main_tit2 span {
    font-size: 45px;
}
}
@media screen and (max-width:1280px){
#sec1 {background-size: cover;}
#sec1 .right img{max-width:450px; width: 80%;}
#sec1 .container {padding: 100px 30px;align-items: center;display: block;text-align: center;}
#sec1 p {font-size: 18px;margin-top: 25px;margin-bottom: 40px;}
#sec1 p span{font-size: 18px !important;}
.sec1_logo { 
    justify-content: center;
}
.sec1_logo p{  
    font-size: 2.5rem !important;  
}
.sec1_logo img{
    width: 14rem;
}
.store_link small {font-size: 13px;}
.store_link strong {font-size: 18px;}
.store_link img{height: 46px;}
.store_link {width: 238px;padding: 12px 12px;}
.btn_box .store_link:last-child {margin-left: 12px;}
.btn_box {justify-content: center;margin-bottom: 50px;}
.jalnan_p {font-size: 18px;margin-bottom: 35px;}
#sec2 {padding: 100px 0 80px;}
.main_tit, .main_tit2,
.main_tit span, .main_tit2 span {font-size: 33px;}
.sec2_tit .fs_28, .sec2_tit{ font-size: 20px;}
.app_info {flex-wrap: wrap;margin-top: 70px;}
.app_info img {margin-bottom: 5px;}
.app_info li { margin-bottom: 55px;}
.app_info small {font-size: 16px;}
.app_info li:last-child{margin-bottom: 0px;}
.app_info .jalnan_p {font-size: 22px;margin-bottom: 15px;}
#sec10 .icon {margin-bottom: 35px;width: 100px;}
#sec10 .jalnan_p {margin-top: 35px;}
#sec10 {height: 780px;padding: 0 30px;padding-top:0px;background-size: cover;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#sec11 h3 {font-size: 33px;margin-top: 30px;}
#sec11 h3 span {font-size: 26px;}
.icon{width: 126px;}
#sec11 {height: 700px;margin-top: 0px;background-size: cover;padding: auto 30px;padding-top: 0;display: flex;justify-content: center;}
}
.m_br{
    display: none;
}
#ft_copy{
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
@media screen and (max-width:1200px){
    header .inner{
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #sec1{
        margin-top: 6rem;
    }
}

@media screen and (max-width:900px){
.img_w{display: none !important;}
.img_m{display: block !important;}
.contact_wrap{
    padding: 3rem;
    border-radius: 0 ;
    top: 0;
}
.icn_close{
    width: 25px;
}
#sec10 .main_tit .m_br {
    display: block;
}
}

@media screen and (max-width:600px){
#sec1{background: url("../img/sec01_m_bg.jpg")no-repeat center;color: #fff;background-size:cover;}
#sec1 p {font-size: 17px;margin-top: 15px;margin-bottom: 30px;word-break: keep-all;}
#sec1 p span{font-size: 17px !important;}
.btn_box {flex-wrap: wrap;}
.btn_box .store_link:last-child {margin-left: 0px;}
.main_tit, .main_tit2,
.main_tit span, .main_tit2 span {font-size: 28px;}
.sec2_tit .fs_28, .sec2_tit{ font-size: 20px;}
.store_link img {height: 30px;}
.store_link strong {font-size: 16px;}
.store_link {width: 172px; margin: 5px !important;}
#sec1 .container {padding: 80px 30px;}
#sec2 {padding: 80px 0 80px;}
.jalnan_p {font-size: 16px;margin-bottom: 25px;}
.app_info {margin-top: 60px;}
.app_info li:last-child{display: block;}
.app_info .jalnan_p {transform: translate(0, 0px);}
.app_info small {transform: translate(0, 0px);}
#sec10 .fs_22{
    font-size: 1.6rem;
}
.ft_inner{
    flex-direction: column;
    padding: 0 0;
}
.ft_info.mt_7{
    margin-top: 30px;
}
.ft_inner ul{
    margin-top: 3rem;
}
.ft_inner ul li{
    margin-right: 10px !important;
    margin-left: 0 !important;
}
header ul li a{
    display: flex;
    align-items: flex-end;
}
#ft_copy {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
}
#ft_company, #ft_info{
    font-size: 1.4rem;
}
}

@media screen and (max-width:600px){
#sec10 .icon {margin-bottom: 25px;width: 80px;}
/* .app_info img {transform: translate(10px, 0px);} */
#sec1 .right img {width: 100%;}
#sec10 {height: 600px;}
#sec11 {height: 600px;padding-top: 0px;padding: 0 30px;}
.icon {width: 110px;}
#sec11 h3 {font-size: 28px;margin-top: 25px;}
#sec11 h3 span {font-size: 22px;}
#sec11 .btn_box {margin-bottom: 0px;}
.app_info img {width: 90%;}
.app_info:last-child img{width:100% !important;}
.logo img{
    width:100px;
}
header ul li{
    margin-left: 10px !important;
}
header ul li img{
    width: 24px;
}

}
@media screen and (max-width:540px){
    .sec1_logo{
        flex-direction: column;
        align-items: center;
    }
    .sec1_logo p{  
        font-size: 2.3rem !important;  
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    .sec1_logo img{
        width: 10rem;
        margin-bottom: 1rem;
    }


    .app_info li.mx-2{ margin-right: 2rem !important; margin-left: 2rem !important; }
    .store_link {width: 160px; margin: 5px !important;}
    .btn_text{
        margin-left: 0 !important;
    }
    .contact_wrap{
        padding: 3rem 1.6rem;
    }
    .contact_wrap .form-group.mt-5{
        margin-top: 1rem !important;
    }
   
.app_info li p{
    padding-top: 10px;
}
    #ft {padding: 6rem 0 !important;}

    .main_tit2  .main_tit{
        word-break: keep-all;
     }
     .m_br{
         display: block;
     }
     .store_link{
         margin: 1rem 0;
         justify-content: space-between;
     }
     #sec2 .sec2_top{
         width: 100%;
         justify-content: center;
     }
     
     .fs_28{
         font-size: 1.8rem;
     }
     
    .contact_btn {
        padding: 3.5rem 0 !important;
        width: 4.2rem !important;
        height: 14rem !important;
        font-size: 1.4rem !important;
    }
    .sec2_tit p{
        line-height: 1.3;
    }
    .sec2_tit h2{
        margin-top: 2rem;
    }
    .app_info li{
        margin-left:  auto;
        margin-right:  auto;
    }
    .main_tit, .main_tit2, .main_tit span, .main_tit2 span{font-size: 25px;}
    .sec2_tit .fs_28, .sec2_tit{ font-size: 20px;}
}

@media screen and (max-width:480px){
#sec10 .jalnan_p {font-size: 14px;}
#sec10 {padding: 0 20px;}

    .store_link {width: 160px; margin: 5px !important;}

}

@media screen and (max-width:420px){
.img_w2{display: none !important;}
.img_m2{display: block !important;}
#sec10 .jalnan_p br{display: none;}
#sec1 p {font-size: 16px;margin-bottom: 25px;}
#sec1 p span{font-size: 16px !important;}
.main_tit, .main_tit2,
.main_tit span, .main_tit2 span {font-size: 25px;}
.sec2_tit .fs_28, .sec2_tit{ font-size: 20px;}
.jalnan_p {font-size: 15px;margin-bottom: 20px;}
.store_link {width: 170px;  padding: 10px 20px;}
#sec1 .container {padding: 70px 30px 60px;}
#sec2 {padding: 70px 0 60px;}
.app_info img {margin-bottom: 0px;}
.app_info .jalnan_p {font-size: 20px;}
#sec10 .icon {width: 72px;}
#sec10 .main_tit {font-size: 22px;}
#sec10 {height: 550px;}
#sec10 .jalnan_p {margin-top: 25px;}
.icon {width: 95px;}
#sec11 h3 span {font-size: 18px;}
#sec11 h3 {font-size: 22px;margin-top: 20px;}
#sec11 {height: 570px;}
.app_info:last-child img {width: 100% !important;}
.app_info {margin-top: 20px;}
.app_info li {margin-bottom: 30px;}
}